<template>
  <template v-for="item in cardList" v-bind:key="item.title">
    <div @click="incident" shadow="hover" class="content-item">
      <div class="item-title">{{ item.title }}</div>
    </div>
  </template>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    const router = useRouter()
    const cardList = ref()
    cardList.value = [
      {
        title: '国际贸易“单一窗口”知识专题库',
      },
      {
        title: '国际贸易法律法规专题库',
      },
      {
        title: '口岸业务知识及业务规范专题库',
      },
      {
        title: '跨境电商业务知识专题库',
      },
    ]
    const incident = () => {
      router.push('policy')
    }
    return { cardList, incident }
  },
})
</script>

<style scoped lang="less">
.content-item {
  margin: 20px;
  height: 100px;
  width: 180px;
  background: #fff;
  text-align: left;
  transition: transform 0.25s ease;
  padding-top: 80px;
  .item-title {
  }
}
.content-item:hover {
  transform: scale(1.2, 1.2);
  // background-color: red;
}
// .evenflow_scale {
//   transition: transform 0.25s ease;
// }
// .evenflow_scale:hover {
//   transform: scale(1.25, 1.25);
// }
</style>
